<template>
    <div id="container">
        <div class="perch"></div>
        <div class="fixe">
            <div class="location" @click="locationRoute">{{city}}</div>
            <div class="search" @click="searchRoute">
                <van-icon name="search" size="16"/> <span>搜索商品</span>
            </div>
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#000" >
                <van-swipe-item v-for="item in bannerList" :key="item.id" >
                    <img :src="item.image_url" width="100%">
                </van-swipe-item>
        </van-swipe>
        <div class="chann">
            <ul>
                <li v-for="item in channelList" :key="item.id" @click="touteInfo(item.id)">
                    <img :src="item.icon_url" width="29" height="29">
                    <p>{{item.name}}</p>
                </li>
            </ul>
        </div>
        <div class="make">
            <p>品牌制造商</p>
            <ul>
                <li v-for="item in brandList" :key="item.id" @click="makeRoute(item.id)">
                    <div class="lute">
                        <p>{{item.name}}</p>
                        <p>{{item.floor_price}}元起</p>
                    </div>
                    <img :src="item.new_pic_url" >
                </li>
            </ul>
        </div>
        <div class="new" @click="newRoute(0)">
            <div class="newBox">
                <p>新品首发</p>
                <span>查看全部</span>
            </div>
        </div>
        <div class="list">
            <ul>
                <li v-for="item in newGoodsList" :key="item.id" @click="infoRoute(item.id)">
                    <img :src="item.list_pic_url" width="140" height="140">
                    <p>{{item.name}}</p>
                    <p>{{item.goods_brief}}</p>
                    <p>￥{{item.retail_price}}</p>
                </li>
            </ul>
        </div>
        <div class="hot" @click="newRoute(1)">
            <div class="hotBox">
                <p>人气推荐 • 好物精选</p>
                <span>查看全部</span>
            </div>
        </div>
        <div class="list">
            <ul>
                <li v-for="item in hotGoodsList" :key="item.id" @click="infoRoute(item.id)">
                    <img :src="item.list_pic_url" width="140" height="140">
                    <p>{{item.name}}</p>
                    <p>{{item.goods_brief}}</p>
                    <p>￥{{item.retail_price}}</p>
                </li>
            </ul>
        </div>
        <div class="topic">
            <div class="icon">
                <p>专题精选</p>
                <img src="@/assets/right.png" width="17" height="17">
            </div>
            <ul>
                <li v-for="item in topicList" :key="item.id" @click="topicRoute(item)">
                    <img :src="item.scene_pic_url" width="315" height="178">
                    <div class="felx">
                        <p>{{item.title}}</p>
                        <p>{{item.price_info}}元起</p>
                        <p>{{item.subtitle}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="newCategoryList">
            <ul v-for="item in newCategoryList" :key="item.id">
                <p>{{item.name}}好物</p>
                <div class="bian">
                    <li v-for="i in item.goodsList" :key="i.id" @click="infoRoute(i.id)">
                        <img :src="i.list_pic_url" width="165" height="165">
                        <p>{{i.name}}</p>
                        <p>￥{{i.retail_price}}</p>
                    </li>
                     <div class="cover" @click="touteInfo(item.id)">
                        <p>{{item.name}}好物</p>
                        <img src="@/assets/rightbig.png" width="38" height="38" style="margin-top:33px;">
                    </div>
                </div>
            </ul>
        </div>
        <height></height>
    </div>
</template>

<script>
import height from "@/components/height.vue"
import { index } from "@/api/home/index.js"
export default {
    data() {
        return {
            value:"",
            bannerList:[],
            channelList:[],
            brandList:[],
            newGoodsList:[],
            hotGoodsList:[],
            topicList:[],
            newCategoryList:[],
            city:""
        };
    },
    created() {
        this.init();
    },
    mounted() {
        var _this = this;
        if(this.$store.state.searchResult.name){
            _this.city = this.$store.state.searchResult.name
        }else{
            AMap.plugin("AMap.CitySearch", function () {
                var citySearch = new AMap.CitySearch();
                citySearch.getLocalCity(function (status, result) {
                    if (status === "complete" && result.info === "OK") {
                    // 查询成功，result即为当前所在城市信息
                    console.log(result);
                    _this.city = result.city;
                    }
                });
            });
        }
    },
    components:{
        height
    },
    methods: {
        init(){
           index("").then(res=>{
            //    console.log(res);
               this.bannerList = res.data.banner;
               this.channelList = res.data.channel;
               this.brandList = res.data.brandList;
               this.newGoodsList = res.data.newGoods;
               this.hotGoodsList = res.data.hotGoods;
               this.topicList = res.data.topicList;
               this.newCategoryList = res.data.newCategoryList;
               console.log(this.topicList);
           }) 
        },
        touteInfo(id){
            this.$router.push({path:'/category/info',query:{ids:id}})
        },
        newRoute(id){
            this.$router.push({path:"/home/newRoute",query:{ids:id}})
        },
        makeRoute(id){
            this.$router.push({path:"/home/make",query:{ids:id}})
        },
        infoRoute(id){
            this.$router.push({path:"/home/info",query:{ids:id}})
        },
        searchRoute(){
            this.$router.push({path:"/home/search"})
        },
        topicRoute(val){
            this.$router.push({path:"/home/topic",query:{id:val.id}})
        },
        locationRoute(){
            this.$router.push({path:"/home/location"})
        }
    },
};
</script>

<style scoped lang="scss">
    @import "./scss/index.scss";



</style>
